<template>
    <el-dialog :fullscreen="fullscreen" v-model="state.visible" title="商户得分排名详情" :close-on-click-modal="false"
        width="80%" top="5%">
        <div class="avue-crud__dialog__menu">
            <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
        </div>
        <el-form :model="state.search" inline>
            <el-form-item label="总得分">
                <el-input v-model="state.search.score" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="时间">
                <el-date-picker v-model="state.search.time" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList" size="mini">搜索</el-button>
                <el-button type="warning" @click="reset" size="mini">重置</el-button>
                <el-button type="success" @click="onDownExcel" size="mini">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="state.list" max-height="550">
            <el-table-column label="时间" prop="time"></el-table-column>
            <el-table-column label="商户名称" prop="name"></el-table-column>
            <el-table-column label="巡查任务得分">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldeDilog">{{ row.task_socre }}</div>
                </template>
            </el-table-column>
            <el-table-column label="是否上传安全承诺书">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldeScoreInfo">{{ row.safe_promise_score }}</div>
                </template>
            </el-table-column>
            <el-table-column label="是否上传疏散路线图">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldeScoreInfo">{{ row.escape_map_score }}</div>
                </template>
            </el-table-column>
            <el-table-column label="是否上传商户架构">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldeScoreInfo">{{ row.emergency_plan_score }}</div>
                </template>
            </el-table-column>
            <el-table-column label="是否上传紧急预案">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldeScoreInfo">{{ row.architecture_score }}</div>
                </template>
            </el-table-column>
            <el-table-column label="消防培训得分">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldActivity('消防培训')">{{ row.activity_px }}</div>
                </template>
            </el-table-column>
            <el-table-column label="火灾演练得分">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldActivity('灭火救援演练')">{{ row.activity_yl }}</div>
                </template>
            </el-table-column>
            <el-table-column label="三关一闭">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldeCloseInfo(row)">{{ row.close }}</div>
                </template>
            </el-table-column>
            <el-table-column label="动火动电">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldeFireInfo(row)">{{ row.dhdj }}</div>
                </template>
            </el-table-column>
            <el-table-column label="烟道清洗">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldeFlueInfo(row)">{{ row.flue }}</div>
                </template>
            </el-table-column>
            <el-table-column label="学习得分">
                <template #default="{ row }">
                    <div class="clickStyle" @click="hanldeStudy">{{ row.study }}</div>
                </template>
            </el-table-column>
            <el-table-column label="总得分">
                <template #default="{ row }">
                    <div>{{ row.score }}</div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 10px" background v-model:current-page="state.pagination.page"
            v-model:page-size="state.pagination.page_size" layout="->,total, sizes, prev, pager, next, jumper"
            :total="state.total" @current-change="getList" @size-change="getList" />
    </el-dialog>

    <!-- 巡查任务得分 -->
    <el-dialog v-model="patro.isPatro" title="巡查任务得分" :close-on-click-modal="false" width="70%" top="5%">
        <el-table :data="patro.tableData" max-height="550">
            <el-table-column label="任务名称" prop="name"></el-table-column>
            <el-table-column label="创建时间" prop="add_time"></el-table-column>
            <el-table-column label="隐患">
                <template #default="{ row }">
                    <div v-if="row.is_danger == 0">无隐患</div>
                    <div v-else-if="row.is_danger == 1">有隐患</div>
                </template>
            </el-table-column>
            <el-table-column label="故障">
                <template #default="{ row }">
                    <div v-if="row.is_fault == 0">无故障</div>
                    <div v-else-if="row.is_fault == 1">有故障</div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 10px" background layout="->,total, prev, pager, next, jumper"
            :total="patro.total" @current-change="studyPage" />
    </el-dialog>

    <!-- 子商户详情 -->
    <el-dialog v-model="score.isScore" title="子商户详情" :close-on-click-modal="false" width="50%" top="10%">
        <div class="dialog-box">
            <div class="row">商户名称：{{ score.info.address }}</div>
            <div class="row">地址：{{ score.info.full_name }}</div>
            <div class="row img-box">
                <div>安全承诺书：</div>
                <img :src="upDataUrl + score.info.safe_promise_file" />
            </div>
            <div class="row img-box">
                <div>疏散线路图：</div>
                <img :src="upDataUrl + score.info.escape_map" />
            </div>
            <div class="row img-box">
                <div>商户架构：</div>
                <img v-if="score.info.emergency_plan" :src="upDataUrl + score.info.emergency_plan" />
            </div>
            <div class="row img-box">
                <div>紧急预案：</div>
                <img v-if="score.info.architecture" :src="upDataUrl + score.info.architecture" />
            </div>
        </div>
    </el-dialog>

    <!-- 消防培训和火灾演练 -->
    <el-dialog v-model="active.isActive" title="巡查任务得分" :close-on-click-modal="false" width="70%" top="5%">
        <el-table :data="active.tableData" max-height="550">
            <el-table-column label="封面图">
                <template #default="{ row }">
                    <img class="cover" :src="upDataUrl + row.cover" />
                </template>
            </el-table-column>
            <el-table-column label="标题" prop="activity_name"></el-table-column>
            <el-table-column label="类型" prop="activity_type"></el-table-column>
            <el-table-column label="地址" prop="address"></el-table-column>
            <el-table-column label="组织人" prop="initiator"></el-table-column>
        </el-table>
    </el-dialog>

    <!-- 三关一闭 -->
    <el-dialog v-model="close.isClose" title="三关一闭">
        <div class="dialog-box">
            <div class="row">是否关水： {{ close.info?.is_water == 1 ? '是' : '否' }}</div>
            <div class="row">是否关电： {{ close.info?.is_electric == 1 ? '是' : '否' }}</div>
            <div class="row">是否关气： {{ close.info?.is_gas == 1 ? '是' : '否' }}</div>
            <div class="row">是否关门： {{ close.info?.is_door == 1 ? '是' : '否' }}</div>
        </div>
    </el-dialog>

    <!-- 动火动电 -->
    <el-dialog v-model="fire.isFire" title="动火动电">
        <div class="dialog-box">
            <div class="row">备注： {{ fire.info?.remark }}</div>
            <div class="row">申请标题： {{ fire.info?.title }}</div>
            <div class="row">联系人： {{ fire.info?.contact_name }}</div>
            <div class="row">联系电话： {{ fire.info?.contact_phone }}</div>
            <div class="row">时间： {{ fire.info?.create_time }}</div>
            <div class="row img-box">
                <div>图片：</div>
                <img v-for="item in fire.info?.images" :src="upDataUrl + item" />
            </div>
            <div class="row img-box" v-if="fire.info?.video">
                <div>视频：</div>
                <video :src="upDataUrl + fire.info?.video" controls></video>
            </div>
        </div>
    </el-dialog>

    <!-- 学习列表 -->
    <el-dialog v-model="study.isStudy" title="学习列表">
        <el-table :data="study.tableData">
            <el-table-column label="序号" type="index" min-width="80"></el-table-column>
            <el-table-column label="商户名" min-width="120" prop="company"></el-table-column>
            <el-table-column label="姓名" prop="name" min-width="120"></el-table-column>
            <el-table-column label="类型" prop="title" min-width="120"></el-table-column>
            <el-table-column label="答题正确数" min-width="120" prop="yes_questions"></el-table-column>
            <el-table-column label="答题错误数" min-width="120" prop="wrong_question"></el-table-column>
            <el-table-column label="得分" min-width="120" prop="score"></el-table-column>
            <el-table-column label="正确率" min-width="120" prop="accuracy"></el-table-column>
            <el-table-column label="是否合格" min-width="120" prop="grade"></el-table-column>
            <el-table-column label="安全证书数量" min-width="120" prop="certificate_number"></el-table-column>
            <el-table-column label="交卷时间" min-width="120" prop="add_time"></el-table-column>
        </el-table>
    </el-dialog>

    <!-- 烟道 -->
    <el-dialog v-model="flue.isFlue" title="烟道清洗" :close-on-click-modal="false" width="70%" top="5%">
        <div class="dialog-box">
            <div class="row">施工地址： {{ flue.info?.cleaning_site }}</div>
            <div class="row">清洗范围： {{ flue.info?.cleaning_range }}</div>
            <div class="row">清洗单位： {{ flue.info?.cleaning_unit }}</div>
            <div class="row">乙方清洗员： {{ flue.info?.service_staff }}</div>
            <div class="row">乙方清洗员联系电话： {{ flue.info?.service_staff_phone }}</div>
            <div class="row">清洗时间： {{ flue.info?.cleaning_time }}</div>
            <div class="row img-box">
                <div>图片：</div>
                <img v-for="item in flue.info?.check_images" :src="upDataUrl + item" />
            </div>
        </div>
    </el-dialog>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { shanghudefen, shanghudefenExcel, studyList, patrolList, subInfo, activityList, closeInfo, fireInfo, flueInfo } from '@/api/dashboard'
const upDataUrl = ref(import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL);

let fullscreen = ref(false)

let flue = reactive({
    isFlue: false,
    info: {
        cleaning_site: '',
        cleaning_range: '',
        cleaning_unit: '',
        service_staff: '',
        service_staff_phone: '',
        cleaning_time: '',
        check_images: []

    }
})

const hanldeFlueInfo = (row) => {
    flue.isFlue = true
    flueInfo({
        sub_unit_id: state.search.sub_unit_id,
        date: row.time,
    }).then(res => {
        flue.info = res.data.data
    })
}

// 学习列表
let study = reactive({
    isStudy: false,
    tableData: []
})

const hanldeStudy = () => {
    study.isStudy = true
    studyList({
        sub_unit_id: state.search.sub_unit_id,
    }).then(res => {
        study.tableData = res.data;
    })
}

// 动火动电
let fire = reactive({
    isFire: false,
    info: {
        remark: '',
        title: '',
        contact_name: '',
        contact_phone: '',
        create_time: '',
        images: [],
        video: ''
    }
})

const hanldeFireInfo = (row) => {
    fire.isFire = true;
    fireInfo({
        sub_unit_id: state.search.sub_unit_id,
        date: row.time,
    }).then(res => {
        fire.info = res.data.data;
    })
}


// 三关一闭
let close = reactive({
    isClose: false,
    info: {
        is_water: 0,
        is_electric: 0,
        is_gas: 0,
        is_door: 0
    }
})

const hanldeCloseInfo = (row) => {
    close.isClose = true;
    closeInfo({
        sub_unit_id: state.search.sub_unit_id,
        date: row.time,
    }).then(res => {
        let { info } = res.data;
        close.info = info
    })
}

//  消防培训和火灾演练
let active = reactive({
    isActive: false,
    tableData: []
})

const hanldActivity = (type) => {
    active.isActive = true;
    activityList({
        sub_unit_id: state.search.sub_unit_id,
        activity_type: type,
    }).then(res => {
        let { list } = res.data;
        active.tableData = list;
    })
}

// 子商户详情
let score = reactive({
    isScore: false,
    info: {
        full_name: '',
        address: '',
        msg: '',
        safe_promise_file: '',
        escape_map: '',
        emergency_plan: '',
        architecture: ' '
    }
})

const hanldeScoreInfo = () => {
    score.isScore = true
    subInfo({
        sub_unit_id: state.search.sub_unit_id,
    }).then(res => {
        score.info = res.data.data
    })
}

// 子商户得分巡查
const patro = reactive({
    isPatro: false,
    tableData: [],
    total: 0,
    page: 1,
    page_size: 10
});

const studyPage = (val) => {
    patro.page = val
    hanldeDilog()
}

const hanldeDilog = () => {
    patro.isPatro = true;
    patrolList({
        sub_unit_id: state.search.sub_unit_id,
        page_size: patro.page_size,
        page: patro.page
    }).then(res => {
        let { data, total } = res.data;
        patro.total = total
        patro.tableData = data;
    })
}

const state = reactive({
    loading: false,
    visible: false,
    search: {
        sub_unit_id: '',

        time: '',
        score: ''
    },
    pagination: {
        page: 1,
        page_size: 20
    },
    total: 0,
    list: []
})

const open = (data?) => {
    state.visible = true
    state.search.sub_unit_id = data.sub_unit_id
    getList()
}
const reset = () => {
    state.search.score = ''
    state.search.time = ''
    getList(1)
}
const getList = async (page = 1) => {
    state.loading = true
    if (page === 1) state.pagination.page = 1
    console.log({ ...state.pagination, ...state.search })
    const { data } = await shanghudefen({ ...state.pagination, ...state.search }).finally(() => (state.loading = false))
    state.list = data.data
    state.total = data.total
}
const onDownExcel = () => {
    shanghudefenExcel({ ...state.search }).then((res) => {
        const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })

        if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
    })
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.clickStyle {
    color: #409eff;
    cursor: pointer;
}

.img-box {
    display: flex;

    >img {
        display: inline-block;
        width: 30%;
    }
}

.dialog-box {
    text-align: left;
    color: #000;

    .row {
        margin-bottom: 20px;
        display: flex;
    }
}

.cover {
    display: block;
    width: 50px;
    height: 50px;
}
</style>
